<template>
  <div class="carouselbox">
    <!-- 菜单栏 -->
    <!--热门口红S -->
    <div class="Carousel_left" @mouseout="leave">
      <div
        class="Carousel_nav"
        @mouseover="enter(0)"
        :class="Navindex === 0 ? 'color' : ''"
      >
        <div class="inner">
        <a>   热门口红</a>
          <a-icon type="right" />
        </div>
        <div class="navlist">
          <ul class="lipstickList">
            <li v-for="item in lipstickList" :key="item.id">
              <a>
                <div class="listimg">
                  <img v-lazy="item.s_photos[0].path" />
                </div>
                <p>{{ item.name }}</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!--热门口红E  -->
      <div class="Carousel_nav" @mouseover="enter(1)" :class="Navindex === 1 ? 'color' : ''">
        <div class="inner">
          <a href="#">底妆</a>
          <a-icon type="right" />
        </div>
        <div class="navlist">
          <ul class="makeupList">
            <li v-for="item in makeupList" :key="item.id">
              <a>
                <div class="listimg">
                  <img v-lazy="item.s_photos[0].path" />
                </div>
                <p>{{ item.name }}</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!--妆前隔离S -->
      <div class="Carousel_nav" @mouseover="enter(2)"  :class="Navindex === 2 ? 'color' : ''">
        <div class="inner">
          <a href="#">妆前隔离</a>
          <a-icon type="right" />
        </div>
        <div class="navlist">
          <ul class="EXmakeup">
            <li v-for="item in EXmakeup" :key="item.id">
              <a>
                <div class="listimg">
                  <img v-lazy="item.s_photos[0].path" />
                </div>
                <p>{{ item.name }}</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <!--妆前隔离E  -->
      <div class="Carousel_nav" @mouseover="enter(3)" :class="Navindex === 3 ? 'color' : ''">
        <div class="inner">
          <a href="#">香水</a>
          <a-icon type="right" />
          <i class="iconfont icon-changyongicon-"></i>
        </div>
        <div class="navlist" >
          <ul class="perfumeList">
            <li v-for="item in perfumeList" :key="item.id">
              <a>
                <div class="listimg">
                  <img v-lazy="item.s_photos[0].path" />
                </div>
                <p>{{ item.name }}</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="Carousel_nav" @mouseover="enter(4)" :class="Navindex === 4 ? 'color' : ''">
        <div class="inner">
          <a href="#">眼部</a>
          <a-icon type="right" />
          <i class="iconfont icon-changyongicon-"></i>
        </div>
        <div class="navlist">
          <ul class="smarthome">
            <li>
              <a href="">
                <div class="listimg"><img src="" /></div>
                <p>YSL</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="Carousel_nav" @mouseover="enter(5)" :class="Navindex === 5 ? 'color' : ''">
        <div class="inner">
          <a href="#">个人护理</a>
          <a-icon type="right" />
          <i class="iconfont icon-changyongicon-"></i>
        </div>
        <div class="navlist" >
          <ul class="smartscreen">
            <li>
              <a href="">
                <div class="listimg"><img src="" /></div>
                <p>YSL</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
      <div class="Carousel_nav" @mouseover="enter(6)" :class="Navindex === 6 ? 'color' : ''">
        <div class="inner">
          <a href="#">其他</a>
          <a-icon type="right" />
          <i class="iconfont icon-changyongicon-"></i>
        </div>
        <div class="navlist">
          <ul class="smartscreen">
            <li>
              <a href="">
                <div class="listimg"><img src="" /></div>
                <p>YSL</p>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </div>

    <a-carousel arrows autoplay effect="fade">
      <img
        v-for="(item, index) in carouselList"
        :key="index"
        v-lazy="item.s_photos[0].path"
      />
    </a-carousel>
  </div>
</template>
<script>
import { carousel } from "@/api/Goods";
// lipstick, makeup
export default {
  data() {
    return {
      carouselList: [],
      lipstickList: [],
      makeupList: [],
      EXmakeup: [],
      perfumeList: [],
      Navindex: "",
      isshow: true,
    };
  },
  methods: {
    enter(index) {
      this.Navindex = index;
    },
    leave() {
      this.Navindex = 999;
    },
  },
  created() {
    carousel().then((res) => {
      this.carouselList = res.data.result.rows;
    });
  },
  watch: {
    "$store.state.XmakeupList": function () {
      this.makeupList = this.$store.state.XmakeupList;
    },
    "$store.state.XlipstickList": function () {
      this.lipstickList = this.$store.state.XlipstickList;
    },
    "$store.state.XEXmakeupList": function () {
      this.EXmakeup = this.$store.state.XEXmakeupList;
    },
    "$store.state.XperfumeList": function () {
      this.perfumeList = this.$store.state.XperfumeList;
    },
  },
};
</script>
<style scoped>
/* For demo */
.ant-carousel >>> .slick-slide {
  text-align: center;
  height: 400px;
  background: #fff;
  overflow: hidden;
  flex-wrap: nowrap;
}
.ant-carousel >>> .slick-slide img {
  width: 100%;
  height: 400px;
}
</style>
<style lang="scss" scoped>
.carouselbox {
  overflow: hidden;
  position: relative;
  .Carousel_left {
    width: 200px;
    height: 400px;
    background: rgba(0, 0, 0, 0.3);
    box-shadow: 0 0 28px rgba(0, 0, 0, 0.08);
    z-index: 1;
    position: absolute;
    left: 0;
    cursor: pointer;
    .Carousel_nav {
      width: 200px;
      height: 44px;
      .inner {
        height: 44px;
        padding: 0 15px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        a {
          width: 200px;
          height: 44px;
          line-height: 44px;
          font-size: 16px;
          color: #fff;
        }
        i {
          font-size: 20px;
          color: #fff;
        }
      }
      .navlist {
        position: absolute;
        top: 0;
        left: 200px;
        display: none;
        ul {
          background-color: #ffffffe3;
          writing-mode: vertical-lr;
          height: 400px;
          padding: 25px 10px 10px 10px;
          box-sizing: border-box;
          li {
            display: inline-block;
            margin: 5px 0;
            height: 60px;
            width: 195px;
            writing-mode: horizontal-tb;
            border-radius: 10px;
            padding: 0px 20px;
            &:hover {
              background: rgba(0, 0, 0, 0.3);
              transition: all 0.8s linear;
            }
            a {
              height: 60px;
              display: flex;
              align-items: center;
              .listimg {
                width: 50px;
                height: 50px;
                padding-right: 5px;
                background-color: #fff;
                img {
                  width: 50px;
                  height: 50px;
                }
              }
              p {
                font-size: 13px;
                color: #3a3a3a;
                margin-left: 10px;
                margin-bottom: 0;
              }
            }
          }
        }
      }
      &:hover .navlist {
        display: block;
      }
    }
  }
  .block {
    display: block;
  }
  .color {
  background: rgba(0, 0, 0, 0.3);
  }
}
</style>